$(document).ready(function () {
    //3 icons - popup window
    $('.icon-boxer .icon-item').click(function(){
        if ($(this).hasClass('active')){
            $('.icon-item').removeClass('active');
            $('.popup-item').hide();
        }
        else{
            $('.icon-item').removeClass('active');
            $('.popup-item').hide();
            $(this).addClass('active');
            var curr_id = $(this).attr('data-id');
            $('.popup-' + curr_id).show();
        }
    });
    $('.popup-close').click(function () {
        $('.icon-item').removeClass('active');
        $('.popup-item').hide();
    });
    //menu - expand
    $('.menu-boxer a.link-hassub').click(function(){
        if ($(this).parent().hasClass('expand')){
            $('.menu-boxer li').removeClass('expand');
            $('.link-second i').attr('class', 'bi bi-arrow-right-circle-fill');
        }
        else {
            $('.menu-boxer li').removeClass('expand');
            $('.link-second i').attr('class', 'bi bi-arrow-right-circle-fill');
            $(this).parent().addClass('expand');
            $(this).find('i').attr('class', 'bi bi-arrow-down-circle-fill');
        }
    });
    $('.innovative-software-content .explore-more').click(function () {
        let infoBox = $('.innovative-software-content .info-box');
        let infoContent = $('.innovative-software-content .info-box .info-content');
        if (infoBox.hasClass('isShow')) {
            infoContent.addClass('transition');
            infoContent.css({ height: '150px' })
            infoBox.removeClass('isShow');
        } else {
            infoContent.removeClass('transition');
            var tempHeight = infoContent.css('height', 'auto').height() + 'px';
            //瞬间复原
            infoContent.css({ height: "150px" })
            infoContent.addClass('transition');
            setTimeout(function () {
                infoContent.css({ height: tempHeight })
                infoBox.addClass('isShow');
            }, 50);
        }
    });

    $('.microsoftAI-content .explore-more').click(function () {
        let infoBox = $('.microsoftAI-content');
        let listBox = $('.list-box-switch');
        if (infoBox.hasClass('isShow')) {
            var tempHeight = listBox.css('height', 'auto').height() + 'px';
            $('.list-box-switch').css({ height: tempHeight })
            setTimeout(function () {
                $('.list-box-switch').css({ height: '0' })
                infoBox.removeClass('isShow');
            }, 50);
        } else {
            infoBox.addClass('isShow');
            $('.list-box-switch').css({ height: "auto" })
            gsap.from('.list-box-switch .list-item', {
                scale: 0.5,
                y: -50,
                stagger: 0.2,// 交错
                paddingTop: '0',
                paddingBottom: '0',
                marginBottom: '0',
                height: '0',
                opacity: 0,
                ease: "power1.out"
            })
        }
    });
    $('.expand-button').click(function () {
        $(this).parent().find('.expand-content').toggleClass('noheight');
    });
    
    //home - swiper1
    var mySwiper11 = new Swiper('#swiper1 .swiper', {
		loop: true,
		autoplay: {
		    delay: 2500,
		    disableOnInteraction: false,
		    pauseOnMouseEnter: true
		},
		pagination: {
		    el: '#swiper1 .swiper-number',
		    renderBullet: function (index, className) {
			    return '<div class="number-item ' + className + '">' + (index + 1) + '</div>';
		    },
		    clickable: true
		},
		navigation: {
		    prevEl: '#swiper1 .btn-prev',
		    nextEl: '#swiper1 .btn-next'
		},
		on: {
		    slideChangeTransitionEnd: function(){
                var count = $('#swiper1 .progress-bar').length;
                var index = 0;
                $('#swiper1 .number-item').each(function(i, item){
                    if ($(item).hasClass('swiper-pagination-bullet-active')){
                        index = i;
                    }
                });
                $('#swiper1 .progress-bar').each(function(i, item){
                    if (i <= index){
                        $(item).removeClass('bg-none').addClass('bg-danger');
                    }
                    else{
                        $(item).removeClass('bg-danger').addClass('bg-none');
                    }
                });
		    }
		}
    });
    //home - swiper2
    var mySwiper12 = new Swiper('#swiper2 .swiper', {
		loop: true,
		autoplay: {
		    delay: 2500,
		    disableOnInteraction: false,
		    pauseOnMouseEnter: true
		},
		pagination: {
		    el: '#swiper2 .swiper-number',
		    renderBullet: function (index, className) {
			    return '<div class="number-item ' + className + '">' + (index + 1) + '</div>';
		    },
		    clickable: true
		},
		navigation: {
		    prevEl: '#swiper2 .btn-prev',
		    nextEl: '#swiper2 .btn-next'
		},
		on: {
		    slideChangeTransitionEnd: function(){
                var count = $('#swiper2 .progress-bar').length;
                var index = 0;
                $('#swiper2 .number-item').each(function(i, item){
                    if ($(item).hasClass('swiper-pagination-bullet-active')){
                        index = i;
                    }
                });
                $('#swiper2 .services-list .title').each(function(i, item){
                    if (i == index){
                        $(item).addClass('active');
                    }
                    else{
                        $(item).removeClass('active');
                    }
                });
                $('#swiper2 .service-description').each(function(i, item){
                    if (i == index){
                        $(item).show();
                    }
                    else{
                        $(item).hide();
                    }
                });
                $('#swiper2 .progress-bar').each(function(i, item){
                    if (i <= index){
                        $(item).removeClass('bg-none').addClass('bg-danger');
                    }
                    else{
                        $(item).removeClass('bg-danger').addClass('bg-none');
                    }
                });
		    }
		}
    });
    //home - swiper3
    var mySwiper13 = new Swiper('#swiper3 .swiper', {
        slidesPerView: 4,
		loop: true,
		autoplay: {
		    delay: 2500,
		    disableOnInteraction: false,
		    pauseOnMouseEnter: true
		},
		pagination: {
		    el: '#swiper3 .carousel-progressbar',
            type: 'progressbar',
		    clickable: true
		},
		navigation: {
		    prevEl: '#swiper3 .btn-prev',
		    nextEl: '#swiper3 .btn-next'
		}
    });
    // about    
    const myCarousel = document.getElementById('headerCarousel1')
    myCarousel.addEventListener('slid.bs.carousel', event => {
        let itemLength = $('#headerCarousel1 .carousel-item').length;
        let progress =  (100 / itemLength).toFixed(2);
        let infoBox = $('#headerCarousel1 .progress-bar');
        if(event.to === 0){
            infoBox.css('width', progress + '%');
        } else if(event.to === itemLength - 1){
            infoBox.css('width', '100%');
        } else{
            infoBox.css('width', (progress * (event.to + 1)) + '%');
        }
    })

    const myCarousel2 = document.getElementById('headerCarousel2')
    myCarousel2.addEventListener('slid.bs.carousel', event => {
        let itemLength = $('#headerCarousel2 .carousel-item').length;
        let progress =  (100 / itemLength).toFixed(2);
        let infoBox = $('#headerCarousel2 .progress-bar');
        if(event.to === 0){
            infoBox.css('width', progress + '%');
        } else if(event.to === itemLength - 1){
            infoBox.css('width', '100%');
        } else{
            infoBox.css('width', (progress * (event.to + 1)) + '%');
        }
    })
});